<template>
	<div>
		<h1>待办事项列表</h1>
		<!-- 3.使用组件 -->
		<todo-add :addItem="addItem"></todo-add>
		<!-- 自定义属性 itemList 绑定data中的变量items -->
		<todo-list :itemList="items" :delItem="delItem"></todo-list>
	</div>
</template>

<script>
	//1.导入组件文件
	import TodoAdd from "./components/TodoAdd.vue"
	import TodoList from "./components/TodoList.vue"
	export default{
		components:{
			TodoAdd,  //2.注册组件，驼峰自动转短划线
			TodoList,
		},
		data(){
			return{
				//在Todo组件定义todo项数据
				items:["上课","吃饭","睡觉","打游戏","郊游",
				       "上课2","吃饭2","睡觉2","打游戏2","郊游2"],
			}
		},
		methods:{
			addItem(item){
				this.items.push(item);
			},
			delItem(i){
				this.items.splice(i,1);
			}
		}
	}
	
</script>

<style>
</style>
